<template>
  <div class="permissions">
    <div class="item header">
      <div class="field">表单字段</div>
      <el-radio-group v-model="global" @change="globalChange">
        <div class="option" v-if="props.nodeType !== NOTIFY"><el-radio :label="1">可编辑</el-radio></div>
        <div class="option"><el-radio :label="2">只读</el-radio></div>
        <div class="option"><el-radio :label="3">隐藏</el-radio></div>
      </el-radio-group>
    </div>
    <div class="item" v-for="(item, name) in permissions" >
      <div class="field">{{item.label}}</div>
      <el-radio-group v-model="item.rule" @change="change">
        <div class="option" v-if="props.nodeType !== NOTIFY"><el-radio :label="1">&nbsp;</el-radio></div>
        <div class="option"><el-radio :label="2">&nbsp;</el-radio></div>
        <div class="option"><el-radio :label="3">&nbsp;</el-radio></div>
      </el-radio-group>
    </div>
  </div>
</template>

<script setup>
import {getCurrentInstance, inject, nextTick, onMounted, ref, watch} from "vue";
import {NOTIFY} from "@/components/EasyProcess/config/nodeType";
const { proxy } = getCurrentInstance();

const props = defineProps({
  nodeType: {
    type: String,
    required: true
  },
  config: { // 传入的流程配置数据
    type: Object,
    required: true,
    default: {}
  },
});

const global = ref(1);
const permissions = ref([]);

/*watch(
    () => props.permissions,
    (val) => {
      init()
    }
);*/


onMounted(async () => {
  init()
});


function init() {
  permissions.value = props.config.permissions
  updateGlobalValue()
}

function updateGlobalValue() {
  let keys = Object.keys(permissions.value)
  let size = keys.length
  let v1 = 0;
  let v2 = 0;
  let v3 = 0;
  keys.forEach(key => {
    let item = permissions.value[key]
    switch (item.rule) {
      case 1:
        v1++
        break
      case 2:
        v2++
        break
      case 3:
        v3++
        break
    }
  })
  if (size === v1) {
    global.value = 1
  } else if (size === v2) {
    global.value = 2
  } else if (size === v3) {
    global.value = 3
  } else {
    global.value = null
  }
}

function globalChange(value) {
  let keys = Object.keys(permissions.value)
  keys.forEach(key => {
    permissions.value[key].rule = value
  })
}

function change() {
  props.config.permissions = permissions.value
  updateGlobalValue()
}

</script>

<style scoped lang="scss">
.permissions {
  width: 100%;


  .item {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    border-bottom: 1px solid #f8f8f9;
    padding: 10px;

    .field {
      flex: 1;
    }

    .option {
      width: 100px;
    }
  }

  .header {
    background-color: #f8f8f9;
  }
}
</style>